<template>
  <v-card flat height="168" class="pl-7 pr-7 pt-14">
    <v-form ref="form">
      <v-row no-gutters>
        <v-col cols="5" class="label">Folder Name</v-col>
        <v-col class="text-left" cols="7">
          <v-text-field
            v-model="folderName"
            v-validate="'required'"
            name="Folder Name"
            class="gray-input-40"
            dense
            solo
            hide-details
          ></v-text-field>
          <span class="vee-validate-error">
            {{ errors.first("Folder Name") }}
          </span>
        </v-col>
      </v-row>
    </v-form>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
@Component({
  components: {},
})
export default class NewFolder extends Vue {
  folderName = "";
  resetForm() {
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(folderName: string) {
    this.folderName = folderName;
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.folderName;
    } else {
      return false;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Library/Dialog/NewFolder/NewFolder.scss";
</style>
